<template>
  <el-dialog
    title="预览文章"
    :visible="centerDialogVisible"
    width="800px"

    @close="closeFn"
  >
    <h2>{{ articleDetail.title }}</h2>
    <div class="tipall">
      <span class="tip">{{ articleDetail.createTime|formatDate('yyyy-MM-dd hh:mm:ss') }}</span>
      <span class="tip">{{ articleDetail.username }}</span>
      <span class="el-icon-view tip" />
      <span class="tip">{{ articleDetail.visits }}</span>
    </div>

    <div class="content" v-html="articleDetail.articleBody" />

  </el-dialog>
</template>

<script>

export default {
  props: {
    centerDialogVisible: {
      required: true,
      type: Boolean
    }
  },
  data() {
    return {
      articleDetail: {}
    }
  },
  watch: {
    articleDetail: {
      handler(res) {
        console.log(res)
      }

    }
  },
  mounted() {
    // console.log(this.articleDetail, '文章详情')
  },
  methods: {

    closeFn() {
      this.$emit('update:centerDialogVisible', false)
    }
  }
}
</script>

<style scoped lang='scss'>
.tip{
    margin-left: 10px;
}
.content{
    background: #f5f5f5;
    padding: 10px;
        border-top: 1px dashed #ccc;
    padding-bottom: 10px;
}
h2{
    margin: 0;
}
.tipall{
    height: 25px;
    display: flex;

  align-items: flex-end;
    margin-bottom: 10px;

}
::v-deep{
    .el-dialog__body {
        img{
             width: 600px;
         }
      }
    }

</style>
